<template>

  <div class="shop-list-item">

    <div class="turn-button">
      <button v-if="showType===0"  @click="$router.push('ShopHome?id='+shop.id)">进店 >></button>
      <button v-if="showType===1" @click="cancelBinding(shop.id)">解除绑定</button>
      <button v-if="showType===2"  @click="cancelCollect(shop.id)">取消收藏</button>
    </div>

    <!--普通店铺列表-->
    <div class="left">
      <img :src="shop.logo" alt="" @click="$router.push('ShopHome?id='+shop.id)">
    </div>

    <div class="right" >
      <div class="name-box">
        <div class="name" v-text="shop.name" @click="$router.push('ShopHome?id='+shop.id)"></div>
        <div class="c"></div>
      </div>
      <div class="classify-name">
        <div class="item" v-if="shop.classifyName && shop.classifyName.length">
          <span style="display: inline-block; height: 25px; float: left;">经验范围:</span>
          <span v-text="shop.classifyName.join(',')" style="display: inline-block; max-width: 60%; height: 25px;float: left;" class="ovd_s"></span>
          <div class="c"></div>
        </div>
        <div class="item distance" v-if="shop.distance" @click="$router.push({
        name:'MyAMapLine',
        query:{
          addressName:shop.name,
          endLocation:shop.location.join(',')
        }
        })">距离:
          <span style="text-decoration: underline" v-text="(shop.distance/1000).toFixed(2)+' km'"></span>
          <i class="el-icon-location"></i>
          &nbsp;&nbsp;
        </div>
      </div>
      <div class="address">
        <span>店铺地址:</span> <span class="ovd_s address-detail" v-text="shop.address"></span>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <div class="c"></div>


  </div>


</template>

<script>
export default {
  name: 'ShopListItem',
  props:{
    shop:Object,
    showType:Number,
    cancelCallBack:Function
  },
  methods:{
    cancelCollect:function (id) {
      let $this=this
      $this.MyRequest($this.ApiDoNameMember + 'Member/collectShop', {id:id}, function (data) {
        if (typeof $this.$props.cancelCallBack==='function'){
          $this.$props.cancelCallBack()
        }
        $this.successTip('取消收藏成功!')
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    cancelBinding:function (shopId) {
      let $this=this
      $this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提示', {
        customClass: 'my-confirm-box',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        backType: 'warning'
      }).then(() => {
        $this.MyRequest($this.ApiDoNameMember + 'Member/cancelBindingShop', {shopId}, function (data) {
          if (typeof $this.$props.cancelCallBack==='function'){
            $this.$props.cancelCallBack()
          }
          $this.successTip('取消绑定成功!')
          $this.$forceUpdate()
        }, function (msg) {
          $this.$message.error(msg)
          // $this.form.password = ''
        })
      }).catch(() => {

      })

    }
  }
}
</script>

<style scoped>

</style>
